Parent | Child | Previous | Next
 

Javascript System Events

IN THIS PAGE

Description

The Grid Object contains a very rich system of client-side events that you can use to customize the Grid behavior.

These events are accessible through the System Events property under the JavaScript - System Events section of the Properties page. Clicking the button next to this property opens the Client-side Grid System Events dialog. This dialog shows all of the client-side events you can use and gives a short description of each event. Event handlers for client-side system events are coded using Javascript. If the event makes any data available to the executing Javascript code, then the names of any parameters used will show up in the 'Parameters' section. You can use the 'Filter' box to filter the list of events and locate a given event quickly. You can also use the 'Defined events only' checkbox to quickly find the events for which you have defined code.

images/01_JSsyseve.png
images/01_JSsyseve2.png

Inserting Placeholders and Grid Methods:

When you write the Javascript event handlers, you might want to use certain placeholders in your Javascript. These placeholders get replaced by actual values when the Grid is rendered. For example, the {Grid.componentName} placeholder gets replaced with the actual Grid alias at run-time. To insert a placeholder in your code, click the 'Insert placeholder...' hyperlink. Your Javascript code can call any of the methods that the Grid object exposes. To see a list of the methods, click the 'Insert Grid method...' placeholder.

Example of How to Use Client-Side Events:

Say you wanted to put up a dialog that said 'Searching. Please wait..' while your Grid component was performing a search. As soon as the search completed, you want to remove the message. To do this you would add code to the 'canSearchSubmit' event to show the message. A5.msgBox.show('Searching...',' Please wait while we search for the records. 

','none',function() {});

Then in the 'afterSearchSubmit' event, you would clear the message. 

A5.msgBox.hide();

Client-side events that are exposed to the developer:

  • beforeAjaxCallback

    Fires before any Ajax callback is made to the server. The e.ajaxEvent property contains the name of the action that triggered the callback. This event can be used to put up a working message while the callback is executing.

  • afterAjaxCallbackComplete

    Fires after any Ajax callback has been completed and the Browser has received a response from the server. The e.ajaxEvent property contains the name of the action that triggered the callback.

  • afterAlphabetButtonSearch

    Fires after the user has executed an Alphabet button search in the Grid part.

  • afterDetailViewCancelEdits

    Fires after user has cancelled edits in the Detail View part.

  • afterDetailViewClose

    Fires after the Detail View has been closed.

  • afterDetailViewDeleteRecord

    Fires after the user has deleted a record in the Detail View.

  • afterDetailViewNewRecord

    Fires after the user has clicked a hyperlink or button to enter a new row in the Detail View.

  • afterDetailViewOpen

    Fires after the detail view for a particular record is shown.

  • afterDetailViewSubmit

    Fires after the user has submitted edits made to a record in the Detail View. The 'hasErrors' parameter is true if there were any errors when committing the data.

  • afterDetailViewSwitchFromEditable

    Fires when the user has switched the current record in the Detail View from editable to not editable. Only fires if Detail View is set to edit on demand.

  • afterDetailViewSwitchToEditable

    Fires when the user has switched the current record in the Detail View to be editable. Only fires if Detail View is set to edit on demand.

  • afterGridCancelEdits

    Fires after the user has cancelled edits in the Grid part by clicking on the Cancel button. Contrast with afterRowCancelEdits.

  • afterGridSubmit

    Fires after the user has submitted edits to the Grid part and the server has processed the edits. The 'hasErrors' parameter is true if there were any errors when committing the data.

  • afterOpenLookup

    Fires after the user has opened a Lookup Grid window.

  • afterPageNavigate

    Fires after the user has navigated to a new page of records.

  • afterQBEHide

    Fires after the user has hidden the QBE (Query by Example) row.

  • afterQBESearch

    Fires after the user has performed a QBE (Query by Example) search. The 'qbeType' parameter specifies the name of the option from the QBE menu that was selected.

  • afterQBEShow

    Fires after the user has shown the QBE (Query by Example) row.

  • afterQuickSearch

    Fires after the user has performed a Quick Search

  • afterRowCancelEdits

    Fires after the user can cancelled edits on a Grid row.

  • afterRowCollapse

    Fires after the user has collapsed a previously expanded row expander.

  • afterRowDelete

    Fires after the user has deleted a record in a Grid by clicking the 'Delete Record' button in a Grid row.

  • afterRowExpand

    Fires after the user has expanded a row expander.

  • afterRowPopulate

    This event fires when a Grid row has been populated with data using the Grid's .populateRow() method. It can be used to set default values in new record rows in the Grid part. To see how this event can be used watch this video.

  • afterRowSubmit

    Fires after the user has clicked the submit row button in a Grid row and the server has processed the request. The 'hasErrors' parameter is true if there were any errors when committing the data.

  • afterRowSwitchFromEditable

    Fires if the Grid is set to 'Edit on Demand' and the user has switched from editable to not-editable mode.

  • afterRowSwitchToEditable

    Fires if the Grid is set to 'Edit on Demand' and the user has switched to editable mode.

  • afterSearchClear

    Fires after the user has cleared the Search part

  • afterSearchSubmit

    Fires after the user has clicked the submit button on the Search part and the server has processed the request.

  • afterSearchSaved

    Fires after the user saves the Search Part criteria.

  • afterSavedSearchLoaded

    Fires after the user loads Search Part criteria that were previously saved.

  • afterSetRowsPerPage

    Fires after the user has changed the number of records per page that the Grid shows.

  • afterSort

    Fires after the user has sorted the records in the Grid by clicking on a Grid column title.

  • canAlphabetButtonSearch

    Fires when the user tries to perform a Alphabet button search. If the event handler contains 'return false;', the event will be cancelled.

  • canDetailViewCancelEdits

    Fires when the user tries to cancel edits in the Detail View. If the event handler contains 'return false;', the event will be cancelled.

  • canDetailViewClose

    Fires when the user tries to close the Detail view. If the event handler contains 'return false;', the event will be cancelled.

  • canDetailViewDeleteRecord

    Fires when the user tries to delete a record in the Detail View. If the event handler contains 'return false;', the event will be cancelled.

  • canDetailViewNewRecord

    Fires when the user tries to enter a new record in the Detail View by clicking the 'Enter new record' icon or hyperlink. If the event handler contains 'return false;', the event will be cancelled (i.e. the new record row will not be shown).

  • canDetailViewOpen

    Fires when the user tries to display the Detail View for a row in the Grid part. If the event handler contains 'return false;', the event will be cancelled.

  • canDetailViewSubmit

    Fires when the user tries to submit edits made to a record in the Detail View. If the event handler contains 'return false;', the event will be cancelled.

  • canDetailViewSwitchFromEditable

    Fires if the Detail View is set to 'edit on demand' and the user tries two switch from editable mode to non-editable mode. If the event handler contains 'return false;', the event will be cancelled.

  • canDetailViewSwitchToEditable

    Fires if the Detail View is set to 'edit on demand' and the user tries two switch to editable mode. If the event handler contains 'return false;', the event will be cancelled.

  • canGridCancelEdits

    Fires when the user tries to cancel edit made to the Detail View record.

  • canGridSubmit

    Fires when the user tries to submit changes made to records in the Grid part by clicking the 'Submit' button for the entire Grid (not the submit button on individual Grid rows). If the event handler contains 'return false;', the event will be cancelled.

  • canOpenLookup

    Fires when the user tries to open the Lookup Grid window. If the event handler contains 'return false;', the event will be cancelled.

  • canPageNavigate

    Fires when the user tries to navigate to another page of records. If the event handler contains 'return false;', the event will be cancelled.

  • canQBEHide

    Fires when the user tries to close the QBE row. If the event handler contains 'return false;', the event will be cancelled.

  • canQBESearch

    Fires when the user tries to do a QBE search. If the event handler contains 'return false;', the event will be cancelled. The 'qbeType' parameter specifies the name of the option from the QBE menu that was selected.

  • canQBEShow

    Fires when the user tries to show the QBE row (if it was previously hidden). If the event handler contains 'return false;', the event will be cancelled.

  • canQuickSearch

    Fires when the user tries to perform a Quick Search. If the event handler contains 'return false;', the event will be cancelled.

  • canRowCancelEdits

    Fires when the user tries to cancel edits made to an individual row in the Grid part. If the event handler contains 'return false;', the event will be cancelled.

  • canRowCollapse

    Fires when the user tries to collapse a row that was previously expanded. If the event handler contains 'return false;', the event will be cancelled.

  • canRowDelete

    Fires when the user tries to delete a row in the Grid part.

  • canRowExpand

    Fires when the user tries to expand a row with a Row Expander icon. If the event handler contains 'return false;', the event will be cancelled.

  • canRowSubmit

    Fires when the user tries to submit changes to an individual row in the Grid part. If the event handler contains 'return false;', the event will be cancelled.

  • canRowSwitchFromEditable

    Fires if the Grid is set to 'edit on demand' and the user tries to swtich back to non-editable mode. If the event handler contains 'return false;', the event will be cancelled.

  • canRowSwitchToEditable

    Fires if the Grid is set to 'edit on demand' and the user tries to editable mode. If the event handler contains 'return false;', the event will be cancelled. 'newRecordRowsVisible' - true/false depending on whether the new record rows are being shown.

  • canSearchClear

    Fires when the user tries to clear the search criteria in the Search part. If the event handler contains 'return false;', the event will be cancelled.

  • canSearchSubmit

    Fires when the user tries to perform a search by clicking the Search button in the Search part. Also fires if any control in the Search part is set to auto-submit (cascading dropdown controls can auto-submit). If the event handler contains 'return false;', the event will be cancelled.

  • canSetRowsPerPage

    If the event handler contains 'return false;', the event will be cancelled.

  • canSort

    Fires when the user tries to sort the Grid by clicking on a column title. If the event handler contains 'return false;', the event will be cancelled.

  • onDetailViewRender

    Fires after the Detail View has been rendered.

  • onDetailViewStateChange

    Fires when the Detail View state has changed. Possible states are 'view', 'change' and 'enter'.

  • onGridRefresh

    Fires when a Grid has been refreshed.

  • onGridRender

    Fires after all of the records in the Grid part have been rendered.

  • onNewRowsHide

    Fires when the user has hidden the new records rows in the Grid part. (The Grid must have been set to only show new record rows on request).

  • onNewRowsShow

    Fires when the user has shown the new records rows in the Grid part. (The Grid must have been set to only show new record rows on request).

  • canNewRowsShow

    Fires when the user tries to shown the new records rows in the Grid part. (The Grid must have been set to only show new record rows on request). Function must return either true or false. If false, action is aborted. e.rowsInEditMode is the number of existing Grid rows that are currently in edit mode.

  • onObjectInitialize

    Fires after the Grid object has been initialized. You use this event to override settings that are defined in the Grid object.

  • onRowBlur

    Fires when a Grid row loses focus.

  • onRowFocus

    Fires when a Grid row gets focus. Only fires if Grid is editable. See onRowSelect.

  • onRowSelect

    Fires when a Grid row is selected. Fires when a row is selected for both read only and editable Grids.

  • onRowRefresh

    Fires when a Grid row is refreshed.

  • onRowRender

    Fires when a Grid row is rendered.

  • onRowStateChange

    Fires when the state of a Grid Row has changed. Possible states are 'view', 'change' and 'enter'.

  • onGridStateChange

    Fires when the state of the Grid Row has changed. 'isDirty' can be either true (if at least one row in the Grid is dirty), or false.

  • onSearchRender

    Fires after the Search part has been rendered.

  • canLookupGridSelectRow

    Fires before the user selects a row in a Lookup Grid. If the event handler contains 'return false;', the event will be cancelled.

  • afterLookupGridFillinValues

    Fires after a record has been selected from a Lookup Grid and the values from the Lookup Grid have been filled into the Parent Grid.

  • onGridRowCheck

    If the checkbox column for the Grid has been turned on, fires when the checkbox is checked, or unchecked.

  • onGridInitializeComplete

    Fires after the Grid has been completely initialized and all HTML has been rendered. Does not fire on subsequent Ajax callbacks.

  • canNamedLayoutSelect

    Fires when the user tries to change the named Layout (if multiple layout designs are enabled). If the event handler contains 'return false' the event will be cancelled and the layout will not be changed.

  • afterNamedLayoutSelect

    Fires after the user has changed the current named Layout.

  • beforeAutoRefresh

    Fires when an auto-refresh of the Grid occurs.

  • onGridRenderComplete

    Very last event to fire after the Grid has been completely rendered and all system Javascript methods to initialize the Grid have fired. Contrast with onGridRender which fires before all system Javascript events have fired.

  • onImageError

    Fires when an image in an element was not found. The e object passed in has an 'element' property. To get the id of the image tag refer to 'e.element.id'. To set the src of the image tag, set the 'e.element.src' property.

  • beforeHTMLReportExport

    Fires when a user clicks on a toolbar button to export an HTML report to PDF, Excel, Word or text. You can use this event to put up a custom 'working...' message. To dismiss the custom message you can add code to the 'afterAjaxCallbackComplete' event.

  • webSocketOnMessage

    Fires when a web-socket server message is received. The message contents is in the e.message parameter.

  • webSocketServerClose

    Fires when the web-socket server is closed.